<template>
  <div class="my-progress" v-loading="loading">
    <div class="my-progress__echarts" id="main4"></div>
    <div class="my-progress__text">
      <ul>
        <li><i></i><span>无</span>{{ detail.progress.inocNo }}</li>
        <li><i></i><span>第一针</span>{{ detail.progress.inocOne }}</li>
        <li><i></i><span>第二针</span>{{ detail.progress.inocTwo }}</li>
        <li><i></i><span>第三针</span>{{ detail.progress.inocThree }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, onBeforeUnmount } from 'vue'
import { incoMapApi } from '@/views/workbench/api/workbenchApi'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/global/session'
import * as echarts from 'echarts'
const route = useRoute()
const townId = route.query.townId as string
let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '' })
userInfo = JSON.parse(getUserInfo() as string)

const loading = ref<boolean>(false)
interface PropsDialog {
  resize: boolean;//浏览器是否变化
}
const props = withDefaults(defineProps<PropsDialog>(), {
  resize: false,
});
interface DetailProgress {
  progress: {
    inocNo?: string | number;
    inocOne?: string | number;
    inocTwo?: string | number;
    inocThree?: string | number;
  }
}
const detail = reactive<DetailProgress>({
  progress: {}
})
const onList = async () => {
  try {
    let res = await incoMapApi({ id: townId })
    if (res?.code === 0) {
      let [arr, colors] = [<any>[], <any>[]]
      detail.progress = res.data
      Object.keys(res.data).map(key => {
        if (key == 'inocNo') {
          arr.push({ value: res.data[key], name: '无' })
          colors.push('#233b4e')
        } else if (key == 'inocOne') {
          arr.push({ value: res.data[key], name: '第一针' })
          colors.push('#f7c444')
        } else if (key == 'inocTwo') {
          arr.push({ value: res.data[key], name: '第二针' })
          colors.push('#6ecb84')
        } else if (key == 'inocThree') {
          arr.push({ value: res.data[key], name: '第三针' })
          colors.push('#4d81d4')
        }
      })
      echartsFun(arr, colors)
    } else {
      loading.value = false
    }
  } catch {
    loading.value = false
  }
}
//如果是乡镇账号 判断一下 是不是当前乡镇
if (userInfo.roleId == '4' || userInfo.roleId == '5') {
  if (userInfo.townId === townId) {
    loading.value = true
    onList()
  }
} else {
  loading.value = true
  onList()
}
// 入户进度图 绘制图表
const echartsFun = (arr, colors) => {
  let myChart = echarts.init(document.getElementById('main4') as unknown as HTMLDivElement)
  let optionMap = {
    tooltip: {
      trigger: 'item'
    },
    color: colors,
    series: [
      {
        name: '疫苗接种情况',
        type: 'pie',
        radius: ['40%', '70%'],
        label: {
          show: true,
          position: 'outside',
          formatter: '{d}%'
        },
        data: arr
      }
    ]
  };
  myChart.setOption(optionMap);
  loading.value = false
}

//浏览器是否变化
watch(
  () => props.resize,
  () => {
    let myChart = echarts.init(document.getElementById('main4') as unknown as HTMLDivElement)
    myChart.resize()
  }
)
//注销之前
onBeforeUnmount(() => {
  let myChart = echarts.init(document.getElementById('main4') as unknown as HTMLDivElement)
  myChart.dispose()
})
</script>
<style scoped lang='scss'>
.my-progress {
  display: flex;
  align-items: center;
  justify-content: center;

  &__echarts {
    width: calc(50vh - 50px);
    height: calc(50vh - 120px);
  }

  &__text {
    width: 200px;
    margin-left: 3vw;

    >ul {
      >li {
        display: flex;
        font-size: 14px;
        line-height: 20px;
        margin: 3vh 0;
        color: #4d81d4;
        font-weight: bold;

        >i {
          display: block;
          width: 12px;
          height: 12px;
          background: #233b4e;
          border-radius: 2px;
          margin: 4px 6px 0 0;
          border-radius: 50%;
        }

        >span {
          display: block;
          width: 100px;
          color: #999;
          font-weight: normal;
        }
      }

      >li:nth-child(2) {
        >i {
          background: #f7c444;
        }
      }

      >li:nth-child(3) {
        >i {
          background: #6ecb84;
        }
      }

      >li:nth-child(4) {
        >i {
          background: #4d81d4;
        }
      }
    }
  }
}
</style>